import React, { Component } from 'react';
import { Menu, Icon } from 'antd';
import { Link, withRouter } from 'react-router-dom';
import style from './style.less';
// const SubMenu = Menu.SubMenu;


@withRouter
class Navbar extends Component {
	state = {
		collapsed: true,
	}
	toggleCollapsed = () => {
		this.setState({
			collapsed: !this.state.collapsed,
		});
	}
	render() {
		const { collapsed } = this.state;
		const { history } = this.props;
		const path = history.location.pathname;
		return (
			<div className={collapsed ? style.navBar : `${style.navBar} ${style.navBarActive}`}>
				<div className={collapsed ? style.logo : `${style.logo} ${style.logoActive}`} onClick={this.toggleCollapsed}>
					<img src="https://justdodo.cn/static/images/dog.png" alt="logo" />
					{!collapsed && <p className={style.des}>justdodo</p>}
				</div>
				<Menu
					defaultSelectedKeys={[path]}
					defaultOpenKeys={['sub1']}
					mode="inline"
					theme="dark"
					inlineCollapsed={this.state.collapsed}
				>
					<Menu.Item key="/index/t1">
						<Link to="/index/t1">
							<Icon type="pie-chart"/>
							<span>t1</span>
						</Link>
					</Menu.Item>
					<Menu.Item key="/index/t2">
						<Link to="/index/t2">
							<Icon type="desktop"/>
							<span>t2</span>
						</Link>
					</Menu.Item>
					{/* <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
						<Menu.Item key="5">Option 5</Menu.Item>
						<Menu.Item key="6">Option 6</Menu.Item>
						<Menu.Item key="7">Option 7</Menu.Item>
						<Menu.Item key="8">Option 8</Menu.Item>
					</SubMenu>
					<SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
						<Menu.Item key="9">Option 9</Menu.Item>
						<Menu.Item key="10">Option 10</Menu.Item>
						<SubMenu key="sub3" title="Submenu">
							<Menu.Item key="11">Option 11</Menu.Item>
							<Menu.Item key="12">Option 12</Menu.Item>
						</SubMenu>
					</SubMenu> */}
				</Menu>
			</div>
		);
	}
}

export default  Navbar;
